<template>
  <div id="indexStatistic" style="height: 12em">
  </div>
</template>

<script>
  export default {
    data() {
      return {
        factorData: [],
        legendData: ['正常', '超标']
      }
    },
    methods: {
      getOption() {
        return {
          title: {
            text: "工况统计",
            x: "left"
          },
          // 用来显示图表中数据的详细信息
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          series: {
            name: "设备报警",
            type: "pie",
            radius: "40%",
            data: this.factorData,
            label: {
              position: 'innner',
              show: false
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          legend: {
            data: this.legendData,
            orient: "vertical",
            left: "right"
          }
        }
      },
      initChart() {
        let charts = this.$echarts.init(document.getElementById('indexStatistic'));
        charts.setOption(this.getOption());
      },
      getData() {
        this.$http.get('/statistic/factor?area=武汉').then(response => {
          this.factorData = response.data;
          this.initChart();
        }).catch(err => {
          console.log(err);
        })
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>

<style>

</style>
